<template>
    <div class="echart-container echart-container-left">
        <div class="item-content  bg-img" >
            <div class="item-title bg-img"><span>设备状态</span></div>
            <div class="main">
                <Echart2 ></Echart2>
            </div>
        </div>
        <div class="item-content  bg-img" >
            <div class="item-title bg-img"><span>温湿度</span></div>
            <div class="main">
                <TempeHumidityEchart ></TempeHumidityEchart>
            </div>
        </div>

        <div class="item-content  bg-img" v-for="val in [1]">
            <div class="item-title bg-img"><span>报警统计</span></div>
            <div class="main">
                <Echart1 ></Echart1>
            </div>
        </div>


    </div>
</template>

<script setup>
    import { onMounted, defineAsyncComponent } from "vue";
    const Echart1 = defineAsyncComponent(() => import('@/components/echarts/alramEchart.vue'));
    const Echart2 = defineAsyncComponent(() => import('@/components/echarts/deviceStatusEchart.vue'));
    const TempeHumidityEchart = defineAsyncComponent(() => import('@/components/echarts/tempeHumidityEchart.vue'));
</script>

<style lang="scss" scoped>
    .main{
        height: calc(100% - 40px);
    }
    .echart-container{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: absolute;
        bottom: 1%;
        width: 22%;
        top: 8%;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .echart-container::-webkit-scrollbar {
        display: none;
    }

    .echart-container-left {
        margin: 0 10px;
        left: 0;
        .item-content{
            border-radius: 4px;
            background-color: #28396f4a;
            margin-bottom: 10px;
            height: 33%;
            color:#fff;
            .item-title{
                font-size: 18px;
                background-size: 100% 100%;
                background-image: url("@/assets/imgs/31.png");
                height: 36px;
                line-height: 36px;
                padding-left: 10%;
                span{
                    background: linear-gradient(to bottom, #fff, #055eff);
                    color: transparent;
                    background-clip: text;
                    font-weight: bold;
                }
            }
        }
    }

</style>
